<template>
  <div>
    <div class="status-box">
      <span>
        <img v-if="flowStatus == 'RUNNING'" src="@/assets/img/status_spz.png" alt="">
        <img v-if="flowStatus == 'AGREE'" src="@/assets/img/status_ytg.png" alt="">
        <img v-if="flowStatus == 'REFUSE'" src="@/assets/img/status_yjj.png" alt="">
        <img v-if="flowStatus == 'TERMINATED'" src="@/assets/img/status_ych.png" alt="">
      </span>
      <div></div>
      <p v-if="formStatusText" class="subtitle" style="margin-top:-40px">{{ title || ''}}</p>
      <!-- <p v-if="flowStatusText" class="secondary-text" :style="{color: setColor(flowStatus)}">{{ flowStatusText || '--' }}</p> -->
      <p v-if="formStatusText" class="secondary-text" :style="{color: setFormColor(formStatusText)}">{{ formStatusText || '--' }}</p>
    </div>
  </div>
</template>
<script>
import { getEnableOne } from '@/api/api'
export default {
  props: {
    title: { // 标题
      type: String,
      default: '状态'
    },
    flowStatusText: { // 审批状态文字
      type: String,
      default: ''
    },
    flowStatus: { // 审批状态编码
      type: String,
      default: ''
    },
    formStatusText: { // 表单状态文字
      type: String,
      default: ''
    },
    ids: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      shows: false
    }
  },
  created() {
    if (this.ids) {
      getEnableOne({id: this.ids, type: 'add'}).then(res => {
        if (res.result && res.result == 'false') {
          this.shows = false
        } else {
          this.shows = true
        }
      })
    }
  },
  // watch: {
  //   ids(newVal) {
  //     if (newVal) {
  //       getEnableOne({id: newVal, type: 'add'}).then(res => {
  //         if (res.result && res.result == 'false') {
  //           this.flowStatusShow = false
  //         }
  //       })
  //     }
  //   }
  // },
  
  methods: {
    setColor(s) {
      let colors = {
        RUNNING: '#1890FF',
        AGREE: '#00B042',
        REFUSE: '#FF4D4F',
        TERMINATED: '#888888',
      }
      return colors[s] || ''
    },
    setFormColor(s) {
      let colors = {
        '未生效': '#888888',
        '已生效': '#1890FF',
        '发货中': '#1890FF',
        '已完成': '#444444',
        '签收中': '#1890FF',
        // '未开始': '#888888',
        // '进行中': '#1890FF',
        // '已完成': '#00B042',
      }
      return colors[s] || '#1890FF'
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/public.less';
.status-box {
  width: 100%;
  height: 42px;
  position: relative;
  text-align: right;
  img {
    width: 86px;
    height: 62px;
    margin-top: -24px;
  }
  .boxs {
    width: 86px;
    height: 62px;
    margin-top: -24px;
  }
}
</style>